import React, { useState, useEffect } from "react";
import styles from "./editArea.module.less";
import SvgIcon from "@components/SvgIcon";
import { connect } from "react-redux";
import { addFestivalAction, reEditFestivalAction } from "@redux/actions02";
import toast from "@utils/showToast";

const ms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const ds = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
];

const EditArea = (props) => {
    const {
        addFestivalAction,
        reEditFestivalAction,
        fes,
        isReedit,
        getReedit,
        getN,
    } = props;

    const [isDown1, setIsDown1] = useState(false);
    const [isDown2, setIsDown2] = useState(false);
    const [menuList, setMenuList] = useState([]);
    const [valM, setValM] = useState("");
    const [valD, setValD] = useState("");
    const [content, setContent] = useState("");
    const [isCheck, setIsCheck] = useState(true);

    const submitData = () => {
        if (!valM || !valD || !content.trim()) {
            toast.fail("各项内容不能为空！");

            return;
        }

        if (valM === 2 && valD > 29) {
            toast.fail("2月份最多29天啊");

            return;
        }

        if (
            (valM === 4 || valM === 6 || valM === 9 || valM === 11) &&
            valD > 30
        ) {
            toast.fail("该月份最多只有30天");

            return;
        }

        isReedit === false
            ? addFestivalAction(valM, valD, content, isCheck)
            : reEditFestivalAction(
                  fes.createTime,
                  valM,
                  valD,
                  content,
                  isCheck
              );

        setValM("");
        setValD("");
        setContent("");
        getReedit(false);
        getN(0);
    };

    useEffect(() => {
        if (Object.keys(fes).length > 0) {
            const { m, d, content, isRemind } = fes;

            setValM(m);
            setValD(d);
            setContent(content);
            setIsCheck(isRemind);
        }
    }, [fes]);

    useEffect(() => {
        if (isReedit === false) {
            setValM("");
            setValD("");
            setContent("");
            setIsCheck(true);
        }
    }, [isReedit]);

    return (
        <div className={styles.edit_area}>
            <p className={styles.title}>此处编辑自定义节日</p>
            <div className={styles.selection}>
                <div
                    className={styles.month}
                    onClick={() => {
                        setIsDown1(!isDown1);
                        setIsDown2(false);
                        !isDown1 && setMenuList(ms);
                    }}
                >
                    <span>{valM}</span>
                    <div
                        className={`${styles.up} ${
                            isDown1 ? styles.active : ""
                        }`}
                    >
                        <SvgIcon font="icon-xiangshang" />
                    </div>
                </div>
                <span>月</span>
                <div
                    className={styles.day}
                    onClick={() => {
                        setIsDown2(!isDown2);
                        setIsDown1(false);
                        !isDown2 && setMenuList(ds);
                    }}
                >
                    <span>{valD}</span>
                    <div
                        className={`${styles.up} ${
                            isDown2 ? styles.active : ""
                        }`}
                    >
                        <SvgIcon font="icon-xiangshang" />
                    </div>
                </div>
                <span>日</span>
                <div
                    className={`${styles.down_menu} ${
                        isDown2 ? styles.rig : styles.left
                    }`}
                    style={{ display: !isDown1 && !isDown2 ? "none" : "block" }}
                >
                    <ul className={styles.menu_ul}>
                        {menuList.map((item) => {
                            return (
                                <li
                                    key={item}
                                    onClick={() => {
                                        isDown1 ? setValM(item) : setValD(item);
                                        setIsDown1(false);
                                        setIsDown2(false);
                                    }}
                                >
                                    {item}
                                </li>
                            );
                        })}
                    </ul>
                </div>
            </div>
            <div className={styles.textarea_wrap}>
                <textarea
                    className={styles.textarea}
                    maxLength={100}
                    placeholder="请填写节日信息，如：xx生日，xx纪念日"
                    value={content}
                    onChange={(e) => {
                        const t = e.target.value;
                        setContent(t);
                    }}
                ></textarea>
                <span className={styles.words_num}>{content.length}/100</span>
            </div>
            <div className={styles.agree}>
                <input
                    type="checkbox"
                    className={styles.agree_check}
                    checked={isCheck}
                    onChange={() => {
                        setIsCheck(!isCheck);
                    }}
                />
                <span className={styles.agree_tip}>
                    每个自定义节日来临前请提醒我哦~
                </span>
            </div>
            <button
                className={`${styles.submit} ${
                    content.trim().length > 0 && valM && valD
                        ? styles.active
                        : ""
                }`}
                onClick={() => {
                    content.trim().length > 0 && valM && valD && submitData();
                }}
            >
                编辑完成
            </button>
        </div>
    );
};

export default connect((state) => state, {
    addFestivalAction,
    reEditFestivalAction,
})(EditArea);
